// ===============================
// Product 模块专属样式 - 极简设计风格
// ===============================

// ===============================
// 快速跳转导航 - 超级极简风格 + 动画效果
// ===============================

.quick-nav {
	background: transparent;
	padding: 16px 0;
	box-shadow: none;
	position: sticky;
	top: 70px;
	z-index: 999;
	border-bottom: 1px solid rgba(100, 181, 246, 0.05);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.quick-nav-container {
	max-width: 1200px;
	margin: 0 auto;
}

.nav-title {
	text-align: center;
	margin-bottom: 0.6rem;
	color: #3b82f6;
	font-size: 0.85rem;
	font-weight: 500;
	animation: titleGlow 2s ease-in-out infinite alternate;
}

.nav-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.nav-btn {
	background: none;
	border: none;
	color: #3b82f6;
	padding: 0.4rem 0.8rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: auto;
	position: relative;
	font-size: 0.8rem;
	overflow: hidden;

	// 添加动画光效
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			90deg,
			transparent,
			rgba(37, 99, 235, 0.3),
			transparent
		);
		transition: left 0.5s;
		z-index: -1;
	}

	&:hover::before {
		left: 100%;
	}
}

.nav-btn:hover {
	color: #2563eb;
	border-bottom: 1px solid #2563eb;
	background: none;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.nav-btn.active {
	color: #2563eb;
	border-bottom: 1px solid #2563eb;
	background: none;
	animation: activeGlow 1.5s ease-in-out infinite alternate;
}

/* 超小圆点指示器 - 增强动画 */
.nav-btn-icon {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	transition: all 0.3s ease;
	animation: pulse 2s ease-in-out infinite;
}

/* 特定导航按钮的图标设计 */
.nav-btn[data-target='MDTK'] .nav-btn-icon {
	width: 16px;
	height: 16px;
	border-radius: 2px;
	background: none;
	border: 1px solid currentColor;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 6px;
		height: 6px;
		background: currentColor;
		border-radius: 1px;
	}
}

.nav-btn[data-target='AI4Data'] .nav-btn-icon {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: none;
	border: 1px solid currentColor;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 4px;
		height: 4px;
		background: currentColor;
		border-radius: 50%;
	}
}

.nav-btn[data-target='Assistant'] .nav-btn-icon {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: none;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 0;
		height: 0;
		border-left: 3px solid transparent;
		border-right: 3px solid transparent;
		border-bottom: 6px solid currentColor;
	}
}

.nav-btn:hover .nav-btn-icon,
.nav-btn.active .nav-btn-icon {
	background: currentColor;
	transform: scale(1.2);
	box-shadow: 0 0 10px currentColor;
}

/* 特定图标的hover效果覆盖 */
.nav-btn:hover .nav-btn-icon[data-target='MDTK'],
.nav-btn.active .nav-btn-icon[data-target='MDTK'],
.nav-btn:hover .nav-btn-icon[data-target='AI4Data'],
.nav-btn.active .nav-btn-icon[data-target='AI4Data'],
.nav-btn:hover .nav-btn-icon[data-target='Assistant'],
.nav-btn.active .nav-btn-icon[data-target='Assistant'] {
	background: none;
	border-color: currentColor;
}

.nav-btn:hover[data-target='MDTK'] .nav-btn-icon::before,
.nav-btn.active[data-target='MDTK'] .nav-btn-icon::before,
.nav-btn:hover[data-target='AI4Data'] .nav-btn-icon::before,
.nav-btn.active[data-target='AI4Data'] .nav-btn-icon::before {
	background: currentColor;
}

.nav-btn:hover[data-target='Assistant'] .nav-btn-icon::before,
.nav-btn.active[data-target='Assistant'] .nav-btn-icon::before {
	border-bottom-color: currentColor;
}

.nav-btn-text {
	text-align: center;
	line-height: 1.2;
}

.nav-btn-title {
	font-size: 0.8rem;
	margin-bottom: 0.05rem;
	font-weight: 500;
	transition: all 0.3s ease;
}

.nav-btn-subtitle {
	font-size: 0.6rem;
	opacity: 0.7;
	font-weight: 400;
	transition: all 0.3s ease;
}

.nav-btn:hover .nav-btn-title,
.nav-btn:hover .nav-btn-subtitle {
	transform: translateY(-1px);
}

/* 动画关键帧 */
@keyframes titleGlow {
	from {
		text-shadow: 0 0 5px rgba(100, 181, 246, 0.3);
	}
	to {
		text-shadow: 0 0 15px rgba(100, 181, 246, 0.6);
	}
}

@keyframes activeGlow {
	from {
		box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
	}
	to {
		box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
	}
}

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

/* 进场动画 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.nav-btn {
	animation: fadeInUp 0.6s ease-out;
}

.nav-btn:nth-child(1) {
	animation-delay: 0.1s;
}
.nav-btn:nth-child(2) {
	animation-delay: 0.2s;
}
.nav-btn:nth-child(3) {
	animation-delay: 0.3s;
}
.nav-btn:nth-child(4) {
	animation-delay: 0.4s;
}

// ===============================
// Product 特有的布局样式 - 增强动画
// ===============================

.container-plus {
	width: 100%;
	margin: 0 auto;

	text-align: center;
}

.product-section {
	margin-bottom: 20px;
	animation: fadeInUp 0.8s ease-out;

	.container {
		max-width: 1200px;
		margin: 0 auto;

		text-align: center;
	}

	.section-title {
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--theme-content-title);
		margin-bottom: 30px;
		background: var(--theme-gradient-title);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		animation: titleSlideIn 1s ease-out;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 60px;
			height: 3px;
			background: var(--theme-gradient-title);
			border-radius: 2px;
			animation: lineExpand 1.2s ease-out 0.5s both;
		}
	}

	.service-text {
		p {
			font-size: 1.2rem;
			line-height: 1.8;
			color: var(--theme-content-text);
			max-width: 800px;
			margin: 0 auto;
			animation: textFadeIn 1s ease-out 0.3s both;
		}
	}
}

.subcategory-header {
	margin: 20px 0 40px 0;
	animation: slideInLeft 0.8s ease-out;

	.container {
		max-width: 1200px;
		margin: 0 auto;

		text-align: center;
		border-bottom: 1px solid var(--theme-content-border);
		padding-bottom: 30px;
		position: relative;

		&::before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 0;
			height: 2px;
			background: var(--theme-accent);
			transition: width 0.8s ease-out 0.5s;
		}

		&:hover::before {
			width: 100px;
		}
	}

	h3 {
		font-size: 1.8rem;
		font-weight: 600;
		color: var(--theme-content-title);
		margin-bottom: 15px;
		background: var(--theme-gradient-title);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		animation: slideInLeft 0.8s ease-out 0.2s both;
	}

	p {
		font-size: 1.1rem;
		line-height: 1.7;
		color: var(--theme-content-text);
		max-width: 600px;
		margin: 0 auto;
		animation: slideInRight 0.8s ease-out 0.4s both;
	}
}

// ===============================
// Product Card 动画增强
// ===============================

.products {
	.product-card {
		animation: cardSlideIn 0.8s ease-out;
		transition: all 0.4s ease;

		&:hover {
			transform: translateY(-8px);

			.product-content {
				.product-image {
					transform: scale(1.05);
					box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
				}

				.product-info h3 {
					animation: textGlow 0.5s ease-out;
				}
			}
		}

		&:nth-child(odd) {
			animation: slideInLeft 0.8s ease-out;
		}

		&:nth-child(even) {
			animation: slideInRight 0.8s ease-out;
		}
	}
}

// ===============================
// Product 特有的特性容器样式 - 动画增强
// ===============================

.features-container {
	display: flex;
	flex-direction: column;
	gap: 8px;

	.feature {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 4px;
		animation: featureSlideIn 0.6s ease-out;
		transition: all 0.3s ease;

		&:nth-child(1) {
			animation-delay: 0.1s;
		}
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		&:nth-child(3) {
			animation-delay: 0.3s;
		}
		&:nth-child(4) {
			animation-delay: 0.4s;
		}

		.icon {
			width: 6px;
			height: 6px;
			background: var(--theme-accent);
			border-radius: 50%;
			flex-shrink: 0;
			transition: all 0.3s ease;
			animation: iconPulse 2s ease-in-out infinite;
		}

		span:not(.icon) {
			color: var(--theme-content-text);
			font-weight: 500;
			font-size: 14px;
			transition: all 0.3s ease;
		}

		&:hover {
			transform: translateX(5px);

			.icon {
				transform: scale(1.5);
				box-shadow: 0 0 10px var(--theme-accent);
			}

			span:not(.icon) {
				color: white;
			}
		}
	}
}

/* 更多动画关键帧 */
@keyframes titleSlideIn {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes lineExpand {
	from {
		width: 0;
	}
	to {
		width: 60px;
	}
}

@keyframes textFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes cardSlideIn {
	from {
		opacity: 0;
		transform: translateY(50px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes featureSlideIn {
	from {
		opacity: 0;
		transform: translateX(-20px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes iconPulse {
	0%,
	100% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.2);
		opacity: 0.8;
	}
}

@keyframes textGlow {
	0%,
	100% {
		text-shadow: none;
	}
	50% {
		text-shadow: 0 0 20px currentColor;
	}
}

// ===============================
// MDTK 页面专属样式 - 现代化设计
// ===============================

.mdtk-page {
	background: var(--theme-content-bg);
	color: var(--theme-content-text);
	position: relative;
	overflow-x: hidden;
}

// ===============================
// MDTK Hero 区域
// ===============================

.mdtk-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-hero-bg);
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--theme-hero-overlay);
		z-index: 1;
	}

	.particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;

		.particle {
			position: absolute;
			background: var(--theme-accent);
			border-radius: 50%;
			animation: float 6s ease-in-out infinite;

			&:nth-child(1) {
				width: 4px;
				height: 4px;
				top: 20%;
				left: 20%;
				animation-delay: 0s;
			}
			&:nth-child(2) {
				width: 6px;
				height: 6px;
				top: 80%;
				left: 80%;
				animation-delay: 1s;
			}
			&:nth-child(3) {
				width: 3px;
				height: 3px;
				top: 40%;
				left: 60%;
				animation-delay: 2s;
			}
			&:nth-child(4) {
				width: 5px;
				height: 5px;
				top: 60%;
				left: 10%;
				animation-delay: 3s;
			}
			&:nth-child(5) {
				width: 4px;
				height: 4px;
				top: 10%;
				left: 70%;
				animation-delay: 4s;
			}
			&:nth-child(6) {
				width: 3px;
				height: 3px;
				top: 90%;
				left: 30%;
				animation-delay: 5s;
			}
			&:nth-child(7) {
				width: 5px;
				height: 5px;
				top: 30%;
				left: 90%;
				animation-delay: 0.5s;
			}
			&:nth-child(8) {
				width: 4px;
				height: 4px;
				top: 70%;
				left: 50%;
				animation-delay: 1.5s;
			}
			&:nth-child(9) {
				width: 6px;
				height: 6px;
				top: 50%;
				left: 25%;
				animation-delay: 2.5s;
			}
			&:nth-child(10) {
				width: 3px;
				height: 3px;
				top: 25%;
				left: 75%;
				animation-delay: 3.5s;
			}
			&:nth-child(11) {
				width: 5px;
				height: 5px;
				top: 75%;
				left: 15%;
				animation-delay: 4.5s;
			}
			&:nth-child(12) {
				width: 4px;
				height: 4px;
				top: 15%;
				left: 85%;
				animation-delay: 5.5s;
			}
		}
	}

	.light-streak {
		position: absolute;
		width: 2px;
		height: 100px;
		background: linear-gradient(
			to bottom,
			transparent,
			var(--theme-accent),
			transparent
		);
		animation: streak 8s linear infinite;

		&:nth-child(1) {
			left: 20%;
			animation-delay: 0s;
		}
		&:nth-child(2) {
			left: 50%;
			animation-delay: 2s;
		}
		&:nth-child(3) {
			left: 80%;
			animation-delay: 4s;
		}
	}

	.hero-content {
		position: relative;
		z-index: 3;
		text-align: center;

		h1 {
			font-size: 3.5rem;
			font-weight: 700;
			margin-bottom: 1.5rem;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: titleFloat 2s ease-in-out infinite alternate;
		}

		p {
			font-size: 1.3rem;
			line-height: 1.8;
			color: var(--theme-content-text-muted);
			max-width: 600px;
			margin: 0 auto;
			animation: textFadeIn 1s ease-out 0.5s both;
		}
	}
}

// ===============================
// Query Section - 现代化周期表
// ===============================

.query-section {
	padding: 20px 0;
	background: var(--theme-content-bg);

	.container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.query-header {
		text-align: center;
		margin-bottom: 3rem;

		.section-title {
			font-size: 2.5rem;
			font-weight: 700;
			color: var(--theme-content-title);
			margin-bottom: 2rem;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.search-controls {
			display: flex;
			justify-content: center;
			gap: 1rem;
			flex-wrap: wrap;
			margin-bottom: 2rem;

			.property-select {
				padding: 0.75rem 1rem;
				border: 2px solid var(--theme-input-border);
				border-radius: 8px;
				background: var(--theme-input-bg);
				color: var(--theme-input-text);
				font-size: 1rem;
				outline: none;
				transition: all 0.3s ease;
				backdrop-filter: var(--backdrop-blur);

				&:focus {
					border-color: var(--theme-accent);
					box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
				}
			}

			.search-input {
				padding: 0.75rem 1rem;
				border: 2px solid var(--theme-input-border);
				border-radius: 8px;
				background: var(--theme-input-bg);
				color: var(--theme-input-text);
				font-size: 1rem;
				min-width: 300px;
				outline: none;
				transition: all 0.3s ease;
				backdrop-filter: var(--backdrop-blur);

				&:focus {
					border-color: var(--theme-accent);
					box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.1);
				}

				&::placeholder {
					color: var(--theme-input-placeholder);
				}
			}

			.search-btn {
				padding: 0.75rem 2rem;
				background: var(--theme-gradient-primary);
				color: white;
				border: none;
				border-radius: 8px;
				font-size: 1rem;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);

				&:hover {
					transform: translateY(-2px);
					box-shadow: var(--theme-button-shadow-hover);
				}

				&:active {
					transform: translateY(0);
				}
			}
		}
	}

	.periodic-table-container {
		display: flex;
		justify-content: center;
		margin-bottom: 3rem;
		overflow-x: auto;
	}

	.periodic-table {
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		grid-template-rows: repeat(9, 1fr);
		gap: 4px;
		width: 100%;
		padding: 2rem;
		background: var(--theme-card-bg);
		border-radius: 20px;
		box-shadow: var(--theme-card-shadow);
		backdrop-filter: var(--backdrop-blur);
		border: 1px solid var(--theme-card-border);

		.element {
			width: 55px;
			height: 55px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: var(--theme-button-secondary-bg);
			border: 2px solid var(--theme-content-border);
			border-radius: 8px;
			cursor: pointer;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					90deg,
					transparent,
					rgba(100, 181, 246, 0.3),
					transparent
				);
				transition: left 0.5s;
			}

			&:hover::before {
				left: 100%;
			}

			&:hover {
				transform: translateY(-3px) scale(1.05);
				background: var(--theme-button-secondary-bg-hover);
				border-color: var(--theme-accent);
				box-shadow: 0 8px 25px rgba(100, 181, 246, 0.4);
			}

			&.element-has-data {
				background: var(--gradient-element-tag);
				border-color: var(--theme-accent);
				color: white;

				&:hover {
					background: var(--theme-accent-hover);
					box-shadow: 0 8px 25px rgba(100, 181, 246, 0.6);
				}
			}

			.element-symbol {
				font-size: 14px;
				font-weight: 700;
				color: var(--theme-content-text);
				margin-bottom: 2px;
			}

			.element-number {
				font-size: 10px;
				color: var(--theme-content-text-muted);
			}

			&.element-has-data {
				.element-symbol,
				.element-number {
					color: white;
				}
			}
		}
	}

	.query-tip {
		text-align: center;
		padding: 2rem;
		background: var(--theme-tips-bg);
		border-radius: 12px;
		border: 1px solid var(--theme-content-border);

		p {
			font-size: 1.1rem;
			line-height: 1.6;
			color: var(--theme-content-text-muted);
			margin: 0;
		}
	}
}

// ===============================
// Modules Section - 功能模块
// ===============================

.modules-section {
	padding: 20px 0;
	background: var(--theme-section-alt-bg);

	.container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.section-title {
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--theme-content-title);
		text-align: center;
		margin-bottom: 3rem;
		background: var(--theme-gradient-title);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 3px;
			background: var(--theme-gradient-title);
			border-radius: 2px;
		}
	}

	.modules-container {
		display: flex;
		flex-direction: column;
		gap: 3rem;
	}

	.modules-row {
		display: flex;
		justify-content: center;
		gap: 2rem;
		flex-wrap: wrap;

		&.first {
			animation: slideInLeft 0.8s ease-out;
		}

		&.second {
			animation: slideInRight 0.8s ease-out;
		}

		.module-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			background: var(--theme-card-bg);
			border-radius: 20px;
			padding: 2rem;
			border: 1px solid var(--theme-card-border);
			box-shadow: var(--theme-card-shadow);
			transition: all 0.4s ease;
			cursor: pointer;
			backdrop-filter: var(--backdrop-blur);
			min-width: 200px;

			flex: 1;

			&:hover {
				transform: translateY(-8px);
				box-shadow: var(--theme-card-shadow-hover);
				border-color: var(--theme-accent);
			}

			.module-content {
				text-align: center;
				width: 100%;

				.module-icon {
					width: 100px;
					height: 100px;
					object-fit: contain;
					border-radius: 12px;
					transition: all 0.3s ease;
					margin-bottom: 1.5rem;
				}

				.module-name {
					font-size: 1.1rem;
					font-weight: 600;
					color: var(--theme-content-title);
					line-height: 1.4;
					transition: all 0.3s ease;
				}
			}

			&:hover {
				.module-icon {
					transform: scale(1.1);
				}

				.module-name {
					color: var(--theme-accent);
				}
			}
		}
	}
}

// ===============================
// Database Section - 数据库
// ===============================

.database-section {
	padding: 20px 0;
	background: var(--theme-content-bg);
	box-sizing: border-box;

	.container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.section-title {
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--theme-content-title);
		text-align: center;
		margin-bottom: 3rem;
		background: var(--theme-gradient-title);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		position: relative;

		&::after {
			content: '';
			position: absolute;
			bottom: -10px;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 3px;
			background: var(--theme-gradient-title);
			border-radius: 2px;
		}
	}

	.database-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		max-width: 1200px;
		margin: 0 auto;
	}

	.database-card {
		background: var(--theme-card-bg);
		border-radius: 20px;
		overflow: hidden;
		border: 1px solid var(--theme-card-border);
		box-shadow: var(--theme-card-shadow);
		transition: all 0.4s ease;
		backdrop-filter: var(--backdrop-blur);
		height: 500px;
		display: flex;
		flex-direction: column;

		&:hover {
			transform: translateY(-5px);
			box-shadow: var(--theme-card-shadow-hover);
		}

		.database-image-wrapper {
			position: relative;
			overflow: hidden;
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 2rem;

			.database-image {
				width: 100%;
				height: 100%;
				object-fit: contain;
				transition: all 0.4s ease;
				border-radius: 12px;
			}
		}

		.database-info {
			padding: 1.5rem 2rem;
			background: var(--theme-card-footer-bg);
			text-align: center;

			.database-caption {
				font-size: 1.4rem;
				font-weight: 600;
				color: var(--theme-content-title);
				margin: 0;
			}
		}

		&:hover {
			.database-image {
				transform: scale(1.02);
			}

			.database-caption {
				color: var(--theme-accent);
			}
		}
	}
}

// ===============================
// MDTK 动画关键帧
// ===============================

@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes streak {
	0% {
		transform: translateY(-100px);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: translateY(100vh);
		opacity: 0;
	}
}

@keyframes titleFloat {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(-10px);
	}
}

@keyframes slide-in-left {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

// ===============================
// MDTK 响应式设计 - 仅桌面端
// ===============================

@media (max-width: 1024px) {
	.mdtk-hero {
		.hero-content {
			h1 {
				font-size: 2.5rem;
			}

			p {
				font-size: 1.1rem;
			}
		}
	}

	.query-section {
		.query-header {
			.section-title {
				font-size: 2rem;
			}

			.search-controls {
				.search-input {
					min-width: 250px;
				}
			}
		}

		.periodic-table-container {
			.periodic-table {
				padding: 1.5rem;

				.element {
					width: 45px;
					height: 45px;

					.element-symbol {
						font-size: 12px;
					}

					.element-number {
						font-size: 9px;
					}
				}
			}
		}
	}

	.modules-section,
	.database-section {
		.section-title {
			font-size: 2rem;
		}
	}

	.modules-section {
		.modules-row {
			.module-item {
				min-width: 180px;
				max-width: 220px;
			}
		}
	}

	.database-section {
		.database-grid {
			grid-template-columns: 1fr;
			gap: 2rem;
			max-width: 800px;
		}

		.database-card {
			height: 450px;
		}
	}
}

// ===============================
// Product 模块响应式适配（非 MDTK 页面）
// ===============================

@media (max-width: 1024px) {
	.product-section {
		.section-title {
			font-size: 2rem;
		}

		.service-text p {
			font-size: 1.1rem;
		}
	}

	.subcategory-header {
		margin: 40px 0 30px 0;

		h3 {
			font-size: 1.5rem;
		}

		p {
			font-size: 1rem;
		}
	}
}

@media (max-width: 768px) {
	.nav-buttons {
		gap: 0.8rem;
		flex-direction: column;
		align-items: center;
	}

	.nav-btn {
		padding: 0.3rem 0.6rem;
		font-size: 0.75rem;
		min-width: 100px;
	}

	.nav-title {
		font-size: 0.8rem;
		margin-bottom: 0.5rem;
	}

	.product-section {
		.section-title {
			font-size: 1.8rem;
		}

		.service-text p {
			font-size: 1rem;
		}
	}

	.subcategory-header {
		margin: 30px 0 25px 0;

		h3 {
			font-size: 1.3rem;
		}

		p {
			font-size: 0.95rem;
		}
	}

	// 移动端简化动画
	.product-card {
		&:nth-child(odd),
		&:nth-child(even) {
			animation: fadeInUp 0.6s ease-out;
		}
	}
}

@media (max-width: 480px) {
	.nav-btn {
		min-width: 80px;
		padding: 0.2rem 0.4rem;
	}

	.nav-btn-title {
		font-size: 0.7rem;
	}

	.nav-btn-subtitle {
		font-size: 0.55rem;
	}

	.product-section {
		.section-title {
			font-size: 1.5rem;
		}

		.service-text p {
			font-size: 0.9rem;
		}
	}

	.subcategory-header {
		margin: 25px 0 20px 0;

		h3 {
			font-size: 1.1rem;
		}

		p {
			font-size: 0.85rem;
		}
	}

	// 移动端进一步简化动画
	.product-section,
	.subcategory-header,
	.product-card,
	.features-container .feature {
		animation: fadeInUp 0.4s ease-out !important;
	}
}

// ===============================
// AI4Data 页面专属样式 - 现代化设计
// ===============================

.ai4data-page {
	background: var(--theme-content-bg);
	color: var(--theme-content-text);
	position: relative;
	overflow-x: hidden;
}

// ===============================
// AI4Data Hero 区域
// ===============================

.ai4data-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--theme-hero-bg);
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--theme-hero-overlay);
		z-index: 1;
	}

	.particles {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 2;

		.particle {
			position: absolute;
			background: var(--theme-accent);
			border-radius: 50%;
			animation: float 6s ease-in-out infinite;

			&:nth-child(1) {
				width: 4px;
				height: 4px;
				top: 20%;
				left: 20%;
				animation-delay: 0s;
			}
			&:nth-child(2) {
				width: 6px;
				height: 6px;
				top: 80%;
				left: 80%;
				animation-delay: 1s;
			}
			&:nth-child(3) {
				width: 3px;
				height: 3px;
				top: 40%;
				left: 60%;
				animation-delay: 2s;
			}
			&:nth-child(4) {
				width: 5px;
				height: 5px;
				top: 60%;
				left: 10%;
				animation-delay: 3s;
			}
			&:nth-child(5) {
				width: 4px;
				height: 4px;
				top: 10%;
				left: 70%;
				animation-delay: 4s;
			}
			&:nth-child(6) {
				width: 3px;
				height: 3px;
				top: 90%;
				left: 30%;
				animation-delay: 5s;
			}
			&:nth-child(7) {
				width: 5px;
				height: 5px;
				top: 30%;
				left: 90%;
				animation-delay: 0.5s;
			}
			&:nth-child(8) {
				width: 4px;
				height: 4px;
				top: 70%;
				left: 50%;
				animation-delay: 1.5s;
			}
			&:nth-child(9) {
				width: 6px;
				height: 6px;
				top: 50%;
				left: 25%;
				animation-delay: 2.5s;
			}
			&:nth-child(10) {
				width: 3px;
				height: 3px;
				top: 25%;
				left: 75%;
				animation-delay: 3.5s;
			}
			&:nth-child(11) {
				width: 5px;
				height: 5px;
				top: 75%;
				left: 15%;
				animation-delay: 4.5s;
			}
			&:nth-child(12) {
				width: 4px;
				height: 4px;
				top: 15%;
				left: 85%;
				animation-delay: 5.5s;
			}
		}
	}

	.light-streak {
		position: absolute;
		width: 2px;
		height: 100px;
		background: linear-gradient(
			to bottom,
			transparent,
			var(--theme-accent),
			transparent
		);
		animation: streak 8s linear infinite;

		&:nth-child(1) {
			left: 20%;
			animation-delay: 0s;
		}
		&:nth-child(2) {
			left: 50%;
			animation-delay: 2s;
		}
		&:nth-child(3) {
			left: 80%;
			animation-delay: 4s;
		}
	}

	.hero-content {
		position: relative;
		z-index: 3;
		text-align: center;

		h1 {
			font-size: 3.5rem;
			font-weight: 700;
			margin-bottom: 1.5rem;
			background: var(--theme-gradient-title);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: titleFloat 2s ease-in-out infinite alternate;
		}

		p {
			font-size: 1.3rem;
			line-height: 1.8;
			color: var(--theme-content-text-muted);
			max-width: 600px;
			margin: 0 auto;
			animation: textFadeIn 1s ease-out 0.5s both;
		}
	}
}

// ===============================
// AI4Data Main Section
// ===============================

.main-section {
	padding: 20px 0;
	background: var(--theme-content-bg);

	.container {
		max-width: 1200px;
		margin: 0 auto;
	}

	.content-grid {
		display: grid;
		grid-template-columns: 400px 1fr;
		gap: 3rem;
		min-height: 600px;
	}
}

// ===============================
// Upload Section - 上传区域
// ===============================

.upload-section {
	.upload-container {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		height: 100%;
	}

	.upload-area {
		background: var(--theme-card-bg);
		border: 2px dashed var(--theme-content-border);
		border-radius: 20px;
		padding: 2rem;
		text-align: center;
		cursor: pointer;
		transition: all 0.3s ease;
		backdrop-filter: var(--backdrop-blur);
		box-shadow: var(--theme-card-shadow);
		position: relative;
		overflow: hidden;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				90deg,
				transparent,
				rgba(100, 181, 246, 0.1),
				transparent
			);
			transition: left 0.5s;
		}

		&:hover::before,
		&.drag-over::before {
			left: 100%;
		}

		&:hover,
		&.drag-over {
			border-color: var(--theme-accent);
			background: var(--theme-button-ghost-bg);
			transform: translateY(-2px);
			box-shadow: var(--theme-card-shadow-hover);
		}

		.file-input {
			display: none;
		}

		.upload-icon {
			width: 48px;
			height: 48px;
			margin: 0 auto 1rem;
			color: var(--theme-accent);

			svg {
				width: 100%;
				height: 100%;
			}
		}

		.upload-content {
			.upload-text {
				font-size: 1rem;
				color: var(--theme-content-text-muted);
				margin-bottom: 1rem;
				line-height: 1.5;
			}

			.upload-btn {
				background: var(--theme-gradient-primary);
				color: white;
				border: none;
				border-radius: 8px;
				padding: 0.75rem 1.5rem;
				font-size: 0.9rem;
				font-weight: 600;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);

				&:hover {
					transform: translateY(-2px);
					box-shadow: var(--theme-button-shadow-hover);
				}
			}
		}
	}

	.download-section {
		.download-btn {
			width: 100%;
			background: var(--theme-card-bg);
			border: 1px solid var(--theme-content-border);
			border-radius: 12px;
			padding: 1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			gap: 0.75rem;
			backdrop-filter: var(--backdrop-blur);
			color: var(--theme-content-text);

			&:hover {
				border-color: var(--theme-accent);
				background: var(--theme-button-ghost-bg);
				transform: translateY(-2px);
				box-shadow: var(--theme-card-shadow);
			}

			svg {
				width: 24px;
				height: 24px;
				color: var(--theme-accent);
				flex-shrink: 0;
			}

			span {
				font-size: 0.85rem;
				line-height: 1.4;
				text-align: left;
			}
		}
	}

	.file-preview {
		flex: 1;
		background: var(--theme-card-bg);
		border: 1px solid var(--theme-content-border);
		border-radius: 12px;
		padding: 1.5rem;
		backdrop-filter: var(--backdrop-blur);
		box-shadow: var(--theme-card-shadow);
		overflow: auto;
		position: relative;

		&.loading {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.loading-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-height: 200px;
			width: 100%;

			.loading-spinner {
				width: 32px;
				height: 32px;
				border: 3px solid rgba(100, 181, 246, 0.3);
				border-top: 3px solid var(--theme-accent);
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-bottom: 1rem;
			}

			.loading-text {
				font-size: 0.9rem;
				color: var(--theme-content-text-muted);
				margin: 0;
			}
		}

		:deep(.preview-title) {
			font-size: 1.1rem;
			font-weight: 600;
			color: var(--theme-content-title);
			margin-bottom: 1rem;
			text-align: center;
		}

		:deep(.preview-placeholder) {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 2rem;
			text-align: center;
			min-height: 200px;

			.placeholder-icon {
				width: 64px;
				height: 64px;
				color: var(--theme-content-text-muted);
				margin-bottom: 1rem;
				opacity: 0.6;

				svg {
					width: 100%;
					height: 100%;
				}
			}

			.placeholder-text {
				font-size: 1rem;
				font-weight: 600;
				color: var(--theme-content-text);
				margin-bottom: 0.5rem;
			}

			.placeholder-hint {
				font-size: 0.85rem;
				color: var(--theme-content-text-muted);
				opacity: 0.8;
			}
		}

		:deep(.preview-table-wrapper) {
			overflow-x: auto;
			border-radius: 8px;
			border: 1px solid var(--theme-content-border);
		}

		:deep(.preview-table) {
			width: 100%;
			border-collapse: collapse;

			td {
				padding: 0.5rem;
				border-bottom: 1px solid var(--theme-content-border);
				font-size: 0.8rem;
				color: var(--theme-content-text);
				white-space: nowrap;

				&.header-cell {
					font-weight: 600;
					background: var(--theme-table-header-bg);
					color: var(--theme-table-header-text);
				}
			}

			tr:nth-child(even) td:not(.header-cell) {
				background: var(--theme-table-row-hover);
			}

			tr:hover td:not(.header-cell) {
				background: var(--theme-table-row-selected);
			}
		}

		:deep(.error-message) {
			color: var(--color-error);
			text-align: center;
			font-size: 0.9rem;
		}
	}

	.analyze-section {
		.analyze-btn {
			width: 100%;
			background: var(--theme-gradient-primary);
			color: white;
			border: none;
			border-radius: 12px;
			padding: 1rem 1.5rem;
			font-size: 1rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			box-shadow: 0 4px 15px rgba(100, 181, 246, 0.3);
			position: relative;

			&:hover:not(:disabled) {
				transform: translateY(-2px);
				box-shadow: var(--theme-button-shadow-hover);
			}

			&:disabled {
				background: var(--theme-input-disabled-bg);
				color: var(--theme-input-disabled-text);
				cursor: not-allowed;
				box-shadow: none;
			}

			&.loading {
				background: var(--theme-gradient-primary);
				cursor: wait;

				svg {
					display: none;
				}
			}

			svg {
				width: 20px;
				height: 20px;
			}

			.loading-spinner {
				width: 20px;
				height: 20px;
				border: 2px solid rgba(255, 255, 255, 0.3);
				border-top: 2px solid white;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
		}
	}
}

// ===============================
// Analysis Section - 分析预览区域
// ===============================

.analysis-section {
	.preview-container {
		position: relative;
		background: transparent !important;
		overflow: hidden;
		box-shadow: none;
		backdrop-filter: none;
		height: 100%;
		min-height: 600px;

		.preview-image {
			width: 100%;

			object-fit: cover;
			transition: all 0.3s ease;
		}

		.pdf-preview {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: none;
			border-radius: 10px;
			background: white !important;

			&[src] {
				border-radius: 10px;
			}
		}
	}
}

// ===============================
// AI4Data 响应式设计 - 仅桌面端
// ===============================

@media (max-width: 1024px) {
	.ai4data-hero {
		.hero-content {
			h1 {
				font-size: 2.5rem;
			}

			p {
				font-size: 1.1rem;
			}
		}
	}

	.main-section {
		padding: 20px 0;

		.content-grid {
			grid-template-columns: 350px 1fr;
			gap: 2rem;
		}
	}

	.upload-section {
		.upload-area {
			padding: 1.5rem;

			.upload-icon {
				width: 40px;
				height: 40px;
			}
		}

		.file-preview {
			padding: 1rem;

			:deep(.preview-table) {
				td {
					padding: 0.4rem;
					font-size: 0.75rem;
				}
			}
		}
	}
}

@media (max-width: 900px) {
	.main-section {
		.content-grid {
			grid-template-columns: 1fr;
			gap: 2rem;
		}
	}

	.upload-section {
		max-width: 600px;
		margin: 0 auto;
	}
}

// ===============================
// Loading 动画样式
// ===============================

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid rgba(100, 181, 246, 0.3);
	border-top: 2px solid var(--theme-accent);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

// 下载按钮的 loading 样式
.download-btn {
	&.loading {
		cursor: wait;
		opacity: 0.8;

		.loading-spinner {
			border-color: rgba(100, 181, 246, 0.3);
			border-top-color: var(--theme-accent);
		}
	}

	&:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}
}

// ===============================
// 引入组件样式
// ===============================

@import url('./components/calculator.scss');
@import url('./components/conductivity.scss');
